import { bookUserDelete, bookUserList } from "@/services/userProfile";
import { Avatar, Button, Empty, Icon, Input, List, Modal, Pagination, Skeleton, Spin, message } from "antd";
import React from "react";
import AuthorizationAddModal from '@/pages/Account/authManage/authorizationAddModal';
import tableDataCheck from "@/utils/isBackPrevPage";
import { getUserAuthList, removeUserAuth } from "@/services/user";
import styles from "./index.less"
import TenantChooseModal from "./TenantChooseModal";
import { sharedTenantsAdd, sharedTenantsDelete, sharedTenantsList } from "@/services/knowledgeFile";

class TenantUserList extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      total:0,
      loading:false,
      list:[],
      search:"",
      isEmpty:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  getList = params => {
    this.setState({
      loading:true
    },async () => {
      const { current,size,search } = this.state;
      const { targetId,authType,pageSource } = this.props;
      let obj = {
        current,
        size,
        search,
        libraryId:targetId,
      }
      const res = await sharedTenantsList(obj)
      this.setState({
        list:res.records,
        total:res.total,
        loading:false,
        isEmpty:res.total == 0,
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({
      current,
      size
    },() => {
      this.getList()
    })
  }

  openAddModal = () => {
    const ids = this.state.list.map(item => item.tenantId)
    this.TenantChooseModal.initModal(ids)
  }

  deleteUser = async tenantId => {
    const { targetId } = this.props;
    const that = this;
    Modal.confirm({
      title: '确定要删除吗?',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        const res = await sharedTenantsDelete({tenantId,libraryId:targetId})
        message.info(res.message)
        const { list,current,size } = that.state;
        const newCurrent = tableDataCheck(list, current)
        that.doSearch(newCurrent,size)
      },
      onCancel() { },
    })
    
  }

  render(){
    const { current,size,list,total,loading,search,isEmpty } = this.state;
    const { targetId,pageSource ,authType} = this.props;
    return (
      <div>
        <div className="topOptionBox" style={{marginBottom:12}}>
          <div className="topOptionBox-left">授权其他服务方</div>
          <div className="topOptionBox-right">
            <Input.Search 
              value={search} 
              onChange={e => this.setState({search:e.target.value})} 
              onSearch={() => this.doSearch(1,size)} 
              placeholder="搜索服务方账号"
              style={{width:200,marginRight:8}}
            />
            <Button type="primary" ghost icon="plus" onClick={() => this.openAddModal()} style={{height:28}}>添加服务方账号</Button>
          </div>
        </div>
        
        <Skeleton avatar title={false} loading={loading} active>        
          <div className={styles.listBox}>
            { isEmpty ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : '' }
            {
              list.map(item => {
                return (
                  <div className={styles.listItem} key={item.id}>
                    <div className={styles.itemAvatar}>
                      <Avatar src="../../../newUI/auth-user.svg" />
                    </div>
                    <div className={styles.itemMain}>
                      <div className={styles.itemContent}>
                        <div className={styles.itemTitle}>{item.tenantName}</div>
                        <div className={styles.itemDesc}>{item.userName}</div>
                      </div>
                      <div className={styles.itemExtraBox}>
                        <div style={{ width: '56px' }}>
                          <button className={styles.itemIcon} onClick={() => this.deleteUser(item.tenantId)}><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="CloseOutlined"><path d="M20.778 20.778a1 1 0 0 0 0-1.414L13.414 12l7.364-7.364a1 1 0 0 0-1.414-1.414L12 10.586 4.636 3.222a1 1 0 0 0-1.414 1.414L10.586 12l-7.364 7.364a1 1 0 1 0 1.414 1.414L12 13.414l7.364 7.364a1 1 0 0 0 1.414 0Z" fill="currentColor"></path></svg></button>
                        </div>
                      </div>
                      
                    </div>
                  </div>
                )
              })
            }
          </div>
        </Skeleton>

        {parseInt(total) > 10 ? (<Pagination
          total={total}
          current={current}
          onChange={this.doSearch}
          showQuickJumper={true}
          style={{ marginTop: 20, textAlign: 'center' }}
        />):''}

        <TenantChooseModal onRef={ref => this.TenantChooseModal = ref} refreshList={() => this.doSearch(1,size)} libraryId={targetId} />
      </div>
    )
  }
}

export default TenantUserList